<template>
  <div style="display: flex;width: 100%;" >
    <div style="flex: 1;width: 50%;padding-left:100px;padding-top: 40px">
      <a-image
          class="img"
          :width="400"
          :height="400"
          :src="goods.url"
      />

    </div>
    <div style="flex: 1;width: 50%;padding-top: 50px;padding-right: 100px;margin: 20px">
      <a-descriptions
          :title="goods.goodsName"

          :column="{ xxl: 4, xl: 3, lg: 3, md: 3, sm: 2, xs: 1 }"

      >

<!--        <a-descriptions-item label="编号" style="height: 50px" >{{goods.code}}</a-descriptions-item>-->
<!--        <a-descriptions-item label="品牌" style="height: 50px">{{goods.trademark}}</a-descriptions-item>-->
<!--        <a-descriptions-item label="价格" style="height: 50px">{{goods.price}}</a-descriptions-item>-->
<!--        <a-descriptions-item label="状态" style="height: 50px">{{Status}}</a-descriptions-item>-->
<!--        <a-descriptions-item label="库存" style="height: 50px">{{goods.goodsInventory}}</a-descriptions-item>-->
<!--        <a-descriptions-item label="商品类别" style="height: 50px">{{category}}</a-descriptions-item>-->
<!--        <a-descriptions-item label="最近一次补货" style="height: 50px">{{lastTime}}</a-descriptions-item>-->
        <a-descriptions-item label="编号" style="height: 50px" >{{goods.code}}</a-descriptions-item>
      </a-descriptions>
      <a-descriptions>
        <a-descriptions-item label="品牌" style="height: 50px">{{goods.trademark}}</a-descriptions-item>
      </a-descriptions>
      <a-descriptions>
        <a-descriptions-item label="价格" style="height: 50px">{{goods.price}}</a-descriptions-item>
      </a-descriptions>
      <a-descriptions>
        <a-descriptions-item label="成本" style="height: 50px">{{goods.cost}}</a-descriptions-item>
      </a-descriptions>
      <a-descriptions>
        <a-descriptions-item label="状态" style="height: 50px">{{Status}}</a-descriptions-item>
      </a-descriptions>
      <a-descriptions>
        <a-descriptions-item label="库存" style="height: 50px">{{goods.goodsInventory}}</a-descriptions-item>
      </a-descriptions>
      <a-descriptions>
        <a-descriptions-item label="商品类别" style="height: 50px">{{category}}</a-descriptions-item>
      </a-descriptions>
      <a-descriptions>
        <a-descriptions-item label="最近一次补货" style="height: 50px">{{lastTime}}</a-descriptions-item>
      </a-descriptions>

      <a-button type="primary" @click="update">修改信息</a-button>
    </div>
  </div>
</template>

<script>
import store from "@/store";
import request from "@/utils/request";
import {ref} from "vue";

  export default {
  name: "GoodsInfo",
    data(){
    return{
      goods:ref([store.getters.getData]),
      Status:ref(''),
      category:ref(''),
      lastTime:ref('test')


    }
    },
    mounted() {
    console.log("******************")
      console.log("goodsInfo:"+store.getters.getData)
      console.log(store.getters.getImageUrl)
      console.log(store.getters.getlocalData)
      console.log("******************")
      this.getGoodsInfo()
      this.getStatus()
      this.getCategory()
      this.getTime()
    },
    methods:{

    update(){
      this.$router.push("/sms/updateggods")
    },

    getGoodsInfo(){
      if (store.getters.getData!==null){
        this.goods=store.getters.getData
        store.commit("setLocalData",this.goods)
      }else
        this.goods=store.getters.getlocalData


    },
      getStatus(){
      let status=this.goods.goodsStatus
        switch (status){
          case 0:this.Status="富余"
                break
          case 1:this.Status="紧缺"
                break
          case 2:this.Status="缺货"
                break
        }
      },

      getCategory(){
      request.get("http://localhost:8002/goods/getcategory/"+this.goods.categoryId).then(res=>{
        this.category=res.data.categoryName
      })
      },
      getTime(){
      console.log(store.getters.getData.lastTime)
      this.lastTime=this.goods.lastTime.substring(0,10)
      }



    },
  }
</script>
<style>
.img {
  width: 400px;
  height: 400px;
  /*border: black 1px solid;*/
  background-color: darkgrey;
  object-fit: cover;
  object-position: 50% 20%;
}


</style>